﻿@{
    Uri url = new Uri(Request.Url.AbsoluteUri);
    ViewBag.Server = url.GetLeftPart(UriPartial.Authority);
    ViewBag.ChainName = ViewBag.EntityID + ViewBag.ChainSoFar.Replace(";", "").Replace(".", "");
    ViewBag.VMName = "VM" + ViewBag.ChainName;
    string crudServiceBaseUrl = ViewBag.Server + "/api/";
    string RafikiMasterVM = System.Configuration.ConfigurationManager.AppSettings["RafikiMasterVM"];
}

<style>
    .relations {
        position: relative;
        width: 90%;
        margin-left: 5%;
    }

    html, body {
        overflow: auto;
    }
</style>
<div id="BINDDIV-@(ViewBag.VMName)">

    @*The following is just a temporary ForEach to verify that we have a list of attributes*@
    <div class="panel-group" id="accordion-@(ViewBag.VMName)">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapse-@(ViewBag.VMName)">
                        <span data-bind="text: EntityName" />
                    </a>
                </h4>
            </div>
            <div id="collapse-@(ViewBag.VMName)" class="panel-collapse collapse">
                <div class="panel-body">
                    <ul id="entitydiv@(ViewBag.ChainName)" class="relations"
                        data-role="listview"
                        data-template="entity-template-@(ViewBag.ChainName)"
                        data-edit-template="entity-edit-template-@(ViewBag.ChainName)"
                        data-bind="source: entityDataSource"></ul>
                </div>
            </div>
        </div>
    </div>



    <script type="text/x-kendo-tmpl" id="entity-template-@(ViewBag.ChainName)">
        @foreach (var item in ViewBag.AttList)
        {
            <li>@item.AttributeName: <span>#:@item.AttributeName#</span></li>
        }
        <div class="edit-buttons">
            <a class="k-button k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a>
            <a class="k-button k-delete-button" href="\\#"><span class="k-icon k-delete"></span></a>
        </div>
    </script>

    <script type="text/x-kendo-tmpl" id="entity-edit-template-@(ViewBag.ChainName)">
        @*        @foreach (var item in ViewBag.AttList)
            {
                <li>
                    @item.AttributeName:
                    <input type="text" class="k-textbox" data-bind="value:@(item.AttributeName)" name="@item.AttributeName" required="required" validationmessage="required" />
                </li>
            }
            <div class="edit-buttons">
                <a class="k-button k-update-button" href="\\#"><span class="k-icon k-update"></span></a>
                <a class="k-button k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a>
            </div>
        *@
    </script>



    <ul id="uldiv@(ViewBag.ChainName)" class="relations" data-template="template-@(ViewBag.ChainName)"
        data-bind="source: entityRelationshipDataSource"></ul>
    <p>&nbsp;</p>

    <script type="text/x-kendo-tmpl" id="template-@(ViewBag.ChainName)">
        <li class="firstlevel">
            <span style="font-weight:bold">
                ${items[0].FunctionName}
            </span>
            <div>
                <ul class="coursepanel" style="width:90%; margin-left:5%">
                    # for (i=0; i < items.length; i++) {
                    #
                    <li>
                        <button onclick="$('\\#subdiv@(ViewBag.ChainName)${items[i].SRNameDirTrimmed()}${items[i].Entity2ID}').load('/home/subentity?entityid=${items[i].Entity2ID}&ChainSoFar=@(ViewBag.ChainSoFar)${items[i].SRNameWithDir};${items[i].Entity2ID};&EntityType=${items[i].Entity2Type}')">
                            ${items[i].Entity2Name}
                        </button>
                        <div id="subdiv@(ViewBag.ChainName)${items[i].SRNameDirTrimmed()}${items[i].Entity2ID}">
                        </div>
                    </li>
                    #
                    }
                    #
                </ul>
            </div>
    </script>

</div>



<script>
                    @(ViewBag.VMName) = kendo.observable({
                        EntityID: "@(ViewBag.EntityID)",
                        EntityName: '',
                        entityDataSource:  new kendo.data.DataSource({
                            transport: {
                                read: {
                                    url: '',
                                    dataType: "json"
                                },
                                update: {
                                    url: "",
                                    dataType: "json",
                                    type: "put"
                                },
                                parameterMap: function(options, operation) {
                                    if (operation !== "read" && options.models) {
                                        return {models: kendo.stringify(options.models)};
                                    }
                                },
                                batch: true
                            },

                            requestEnd: function(e) {
                                setTimeout(function () {

                                    @(ViewBag.VMName).set("EntityName",@(ViewBag.VMName).entityDataSource.at(0).EntityName);
                                    @(ViewBag.VMName).entityRelationshipDataSource.transport.options.read.url = "@crudServiceBaseUrl" + "readnew/" + "@(ViewBag.ChainSoFar)" + "/relatedentities";
                                    @(ViewBag.VMName).entityRelationshipDataSource.read();
                                })
                            },
                            schema: {
                                model: {
                                    id: "EntityID"
                                }
                            }
                        }),
                        entityRelationshipDataSource: new kendo.data.DataSource({
                            transport: {
                                read: {
                                    url: '',
                                    dataType: "json"
                                }
                            },
                            requestEnd: function (e) {
                                setTimeout(function () {
                                    $("#uldiv@(ViewBag.ChainName)").html(kendo.render(kendo.template($("#template-@(ViewBag.ChainName)").html()), @(ViewBag.VMName).entityRelationshipDataSource.view()));
                                    $("#uldiv@(ViewBag.ChainName)").kendoPanelBar({})
                                })
                            },
                            schema: {
                                model: {
                                    id: "EntityID",
                                    fields: {
                                        FunctionName: {editable: false}
                                    },
                                    SRNameDirTrimmed: function() {
                                        return this.get("SRNameWithDir").replace(".","");
                                    }
                                }
                            },
                            group: { field: "FunctionName" },
                            change: function() {


                            }
                        })

                    });
    kendo.bind($("#BINDDIV-@(ViewBag.VMName)"),@(ViewBag.VMName));

    @(ViewBag.VMName).entityDataSource.transport.options.read.url = "@crudServiceBaseUrl"
            + 'readnew/' + '@(ViewBag.EntityTypeSubType)' + '?Filter=EntityID="@(ViewBag.EntityID)"';
    @(ViewBag.VMName).entityDataSource.read();

    function expandCollapse(e) {
        if ($(e.item).is(".k-state-active")) {
            var that = this;
            window.setTimeout(function () { that.collapse(e.item); }, 1);
        } else{
            $('html, body').animate({
                scrollTop: $(e.item).offset().top - 100 },100);

        }
    }

</script>
